<template>
    <div class="AgCharts">
        <ag-charts class="item" :options="options1" />
        <ag-charts class="item" :options="options2" />
        <ag-charts class="item" :options="options3" />
        <ag-charts class="item" :options="options4" />
        <ag-charts class="item" :options="options5" />
        <ag-charts class="item" :options="options6" />
        <ag-charts class="item" :options="options7" />
        <ag-charts class="item" :options="options8" />
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { AgCharts } from 'ag-charts-vue3';
import "ag-charts-enterprise";
const options1 = ref({
    data: [
        { month: 'Jan', avgTemp: 2.3, iceCreamSales: 162000 },
        { month: 'Mar', avgTemp: 6.3, iceCreamSales: 302000 },
        { month: 'May', avgTemp: 16.2, iceCreamSales: 800000 },
        { month: 'Jul', avgTemp: 22.8, iceCreamSales: 1254000 },
        { month: 'Sep', avgTemp: 14.5, iceCreamSales: 950000 },
        { month: 'Nov', avgTemp: 8.9, iceCreamSales: 200000 },
    ],
    series: [{ type: 'bar', xKey: 'month', yKey: 'iceCreamSales' }],
});
const options2 = ref({
    data: [
        {
            quarter: "Q1'18",
            iphone: 140,
            mac: 16,
            ipad: 14,
            wearables: 12,
            services: 20,
        },
        {
            quarter: "Q2'18",
            iphone: 124,
            mac: 20,
            ipad: 14,
            wearables: 12,
            services: 30,
        },
        {
            quarter: "Q3'18",
            iphone: 112,
            mac: 20,
            ipad: 18,
            wearables: 14,
            services: 36,
        },
        {
            quarter: "Q4'18",
            iphone: 118,
            mac: 24,
            ipad: 14,
            wearables: 14,
            services: 36,
        },
    ],
    title: {
        text: "Apple's Revenue by Product Category",
    },
    subtitle: {
        text: "In Billion U.S. Dollars",
    },
    series: [
        {
            type: "bar",
            xKey: "quarter",
            yKey: "iphone",
            yName: "iPhone",
        },
        {
            type: "bar",
            xKey: "quarter",
            yKey: "mac",
            yName: "Mac",
        },
        {
            type: "bar",
            xKey: "quarter",
            yKey: "ipad",
            yName: "iPad",
        },
        {
            type: "bar",
            xKey: "quarter",
            yKey: "wearables",
            yName: "Wearables",
        },
        {
            type: "bar",
            xKey: "quarter",
            yKey: "services",
            yName: "Services",
        },
    ],

})
const options3 = ref({
    title: {
        text: "Annual Fuel Expenditure",
    },
    data: [
        {
            quarter: "Q1",
            petrol: 200,
            diesel: 100,
        },
        {
            quarter: "Q2",
            petrol: 300,
            diesel: 130,
        },
        {
            quarter: "Q3",
            petrol: 350,
            diesel: 160,
        },
        {
            quarter: "Q4",
            petrol: 400,
            diesel: 200,
        },
    ],
    series: [
        {
            type: "line",
            xKey: "quarter",
            yKey: "petrol",
            yName: "Petrol",
        },
        {
            type: "line",
            xKey: "quarter",
            yKey: "diesel",
            yName: "Diesel",
        },
    ],
})
const options4 = ref({
    title: {
        text: "2023 Average Temperatures",
    },
    subtitle: {
        text: "Oxford, UK",
    },
    data: [
        { month: "January", max: 8.5, min: 2.6 },
        { month: "February", max: 10.4, min: 3.0 },
        { month: "March", max: 10.9, min: 4.7 },
        { month: "April", max: 13.7, min: 5.0 },
        { month: "May", max: 18.2, min: 8.4 },
        { month: "June", max: 23.6, min: 12.2 },
        { month: "July", max: 21.3, min: 13.0 },
        { month: "August", max: 21.9, min: 13.1 },
        { month: "September", max: 22.6, min: 13.2 },
        { month: "October", max: 17.0, min: 9.7 },
        { month: "November", max: 11.1, min: 4.9 },
        { month: "December", max: 10.2, min: 5.2 },
    ],
    series: [
        {
            type: "line",
            xKey: "month",
            xName: "Month",
            yKey: "min",
            yName: "Min Temperature",
            interpolation: { type: "smooth" },
        },
        {
            type: "line",
            xKey: "month",
            xName: "Month",
            yKey: "max",
            yName: "Max Temperature",
            interpolation: { type: "smooth" },
        },
    ],
})
const options5 = ref({
    data: [
        { asset: "Stocks", amount: 60000, yield: 3 },
        { asset: "Bonds", amount: 40000, yield: 4 },
        { asset: "Cash", amount: 7000, yield: 0.75 },
        { asset: "Real Estate", amount: 5000, yield: 4 },
        { asset: "Commodities", amount: 3000, yield: 5 },
    ],
    title: {
        text: "Portfolio Composition",
    },
    subtitle: {
        text: "Showing Annual Yield",
    },
    series: [
        {
            type: "pie",
            angleKey: "amount",
            radiusKey: "yield",
            legendItemKey: "asset",
        },
    ],
})
const options6 = ref({
    data: [
        {
            date: new Date("Monday, July 31, 2023"),
            open: 4584.82,
            high: 4594.22,
            low: 4573.14,
            close: 4588.96,
            volume: 2411537985000,
        },
        {
            date: new Date("Tuesday, August 01, 2023"),
            open: 4578.83,
            high: 4584.62,
            low: 4567.53,
            close: 4576.73,
            volume: 2172699881000,
        },
        {
            date: new Date("Wednesday, August 02, 2023"),
            open: 4550.93,
            high: 4550.93,
            low: 4505.75,
            close: 4513.39,
            volume: 2466207896000,
        },
        {
            date: new Date("Thursday, August 03, 2023"),
            open: 4494.27,
            high: 4519.49,
            low: 4485.54,
            close: 4501.89,
            volume: 2351421483000,
        },
        {
            date: new Date("Friday, August 04, 2023"),
            open: 4513.96,
            high: 4540.34,
            low: 4474.55,
            close: 4478.03,
            volume: 2386696495000,
        },
        {
            date: new Date("Monday, August 07, 2023"),
            open: 4491.58,
            high: 4519.84,
            low: 4491.15,
            close: 4518.44,
            volume: 2055431221000,
        },
        {
            date: new Date("Tuesday, August 08, 2023"),
            open: 4498.03,
            high: 4503.31,
            low: 4464.39,
            close: 4499.38,
            volume: 2172253124000,
        },
        {
            date: new Date("Wednesday, August 09, 2023"),
            open: 4501.57,
            high: 4502.44,
            low: 4461.33,
            close: 4467.71,
            volume: 2046722089000,
        },
        {
            date: new Date("Thursday, August 10, 2023"),
            open: 4487.16,
            high: 4527.37,
            low: 4457.92,
            close: 4468.83,
            volume: 2111185396000,
        },
        {
            date: new Date("Friday, August 11, 2023"),
            open: 4450.69,
            high: 4476.23,
            low: 4443.98,
            close: 4464.05,
            volume: 1850766477000,
        },
        {
            date: new Date("Monday, August 14, 2023"),
            open: 4458.13,
            high: 4490.33,
            low: 4453.44,
            close: 4489.72,
            volume: 1955913253000,
        },
        {
            date: new Date("Tuesday, August 15, 2023"),
            open: 4478.87,
            high: 4478.87,
            low: 4432.19,
            close: 4437.86,
            volume: 1977157506000,
        },
        {
            date: new Date("Wednesday, August 16, 2023"),
            open: 4433.79,
            high: 4449.95,
            low: 4403.55,
            close: 4404.33,
            volume: 2001143711000,
        },
        {
            date: new Date("Thursday, August 17, 2023"),
            open: 4416.32,
            high: 4421.17,
            low: 4364.83,
            close: 4370.36,
            volume: 2216839469000,
        },
        {
            date: new Date("Friday, August 18, 2023"),
            open: 4344.88,
            high: 4381.82,
            low: 4335.31,
            close: 4369.71,
            volume: 2157858548000,
        },
        {
            date: new Date("Monday, August 21, 2023"),
            open: 4380.28,
            high: 4407.55,
            low: 4360.3,
            close: 4399.77,
            volume: 2057592847000,
        },
        {
            date: new Date("Tuesday, August 22, 2023"),
            open: 4415.33,
            high: 4418.59,
            low: 4382.77,
            close: 4387.55,
            volume: 1905849406000,
        },
        {
            date: new Date("Wednesday, August 23, 2023"),
            open: 4396.44,
            high: 4443.18,
            low: 4396.44,
            close: 4436.01,
            volume: 2013748142000,
        },
        {
            date: new Date("Thursday, August 24, 2023"),
            open: 4455.16,
            high: 4458.3,
            low: 4375.55,
            close: 4376.31,
            volume: 2077193771000,
        },
        {
            date: new Date("Friday, August 25, 2023"),
            open: 4389.38,
            high: 4418.46,
            low: 4356.29,
            close: 4405.71,
            volume: 1959845124000,
        },

        {
            date: new Date("Monday, August 28, 2023"),
            open: 4426.03,
            high: 4439.56,
            low: 4414.98,
            close: 4433.31,
            volume: 1669881577000,
        },
        {
            date: new Date("Tuesday, August 29, 2023"),
            open: 4432.75,
            high: 4500.14,
            low: 4431.68,
            close: 4497.63,
            volume: 1936663046000,
        },
        {
            date: new Date("Wednesday, August 30, 2023"),
            open: 4500.34,
            high: 4521.65,
            low: 4493.59,
            close: 4514.87,
            volume: 1827645178000,
        },

        {
            date: new Date("Thursday, August 31, 2023"),
            open: 4517.01,
            high: 4532.26,
            low: 4507.39,
            close: 4507.66,
            volume: 2352361081000,
        },

        {
            date: new Date("Friday, September 01, 2023"),
            open: 4530.6,
            high: 4541.25,
            low: 4501.35,
            close: 4515.77,
            volume: 1958155311000,
        },
        {
            date: new Date("Tuesday, September 05, 2023"),
            open: 4510.06,
            high: 4514.29,
            low: 4496.01,
            close: 4496.83,
            volume: 2128341430000,
        },
        {
            date: new Date("Wednesday, September 06, 2023"),
            open: 4490.35,
            high: 4490.35,
            low: 4442.38,
            close: 4465.48,
            volume: 2138052710000,
        },
        {
            date: new Date("Thursday, September 07, 2023"),
            open: 4434.55,
            high: 4457.81,
            low: 4430.46,
            close: 4451.14,
            volume: 2441134922000,
        },
        {
            date: new Date("Friday, September 08, 2023"),
            open: 4451.3,
            high: 4473.53,
            low: 4448.38,
            close: 4457.49,
            volume: 2076441612000,
        },
        {
            date: new Date("Monday, September 11, 2023"),
            open: 4480.98,
            high: 4490.77,
            low: 4467.89,
            close: 4487.46,
            volume: 2165432434000,
        },
        {
            date: new Date("Tuesday, September 12, 2023"),
            open: 4473.27,
            high: 4487.11,
            low: 4456.83,
            close: 4461.9,
            volume: 2184137855000,
        },
        {
            date: new Date("Wednesday, September 13, 2023"),
            open: 4462.65,
            high: 4479.39,
            low: 4453.52,
            close: 4467.44,
            volume: 2268926200000,
        },
        {
            date: new Date("Thursday, September 14, 2023"),
            open: 4487.78,
            high: 4511.99,
            low: 4478.69,
            close: 4505.1,
            volume: 2275484003000,
        },
        {
            date: new Date("Friday, September 15, 2023"),
            open: 4497.98,
            high: 4497.98,
            low: 4447.21,
            close: 4450.32,
            volume: 4244973105000,
        },
        {
            date: new Date("Monday, September 18, 2023"),
            open: 4445.13,
            high: 4466.36,
            low: 4442.11,
            close: 4453.53,
            volume: 1932361461000,
        },
        {
            date: new Date("Tuesday, September 19, 2023"),
            open: 4445.41,
            high: 4449.85,
            low: 4416.61,
            close: 4443.95,
            volume: 2018270144000,
        },
        {
            date: new Date("Wednesday, September 20, 2023"),
            open: 4452.81,
            high: 4461.03,
            low: 4401.38,
            close: 4402.2,
            volume: 1976745837000,
        },

        {
            date: new Date("Thursday, September 21, 2023"),
            open: 4374.36,
            high: 4375.7,
            low: 4329.17,
            close: 4330.0,
            volume: 2298552282000,
        },
        {
            date: new Date("Friday, September 22, 2023"),
            open: 4341.74,
            high: 4357.4,
            low: 4316.49,
            close: 4320.06,
            volume: 2135953365000,
        },
        {
            date: new Date("Monday, September 25, 2023"),
            open: 4310.62,
            high: 4338.51,
            low: 4302.7,
            close: 4337.44,
            volume: 1858119044000,
        },
        {
            date: new Date("Tuesday, September 26, 2023"),
            open: 4312.88,
            high: 4313.01,
            low: 4265.98,
            close: 4273.53,
            volume: 2129442202000,
        },
        {
            date: new Date("Wednesday, September 27, 2023"),
            open: 4282.63,
            high: 4292.07,
            low: 4238.63,
            close: 4274.51,
            volume: 2299297267000,
        },
        {
            date: new Date("Thursday, September 28, 2023"),
            open: 4269.65,
            high: 4317.27,
            low: 4264.38,
            close: 4299.7,
            volume: 2235764324000,
        },
        {
            date: new Date("Friday, September 29, 2023"),
            open: 4328.18,
            high: 4333.15,
            low: 4274.86,
            close: 4288.05,
            volume: 2411036284000,
        },
        {
            date: new Date("Monday, October 02, 2023"),
            open: 4284.52,
            high: 4300.58,
            low: 4260.21,
            close: 4288.39,
            volume: 2419266832000,
        },
        {
            date: new Date("Tuesday, October 03, 2023"),
            open: 4269.75,
            high: 4281.15,
            low: 4216.45,
            close: 4229.45,
            volume: 2430973527000,
        },
        {
            date: new Date("Wednesday, October 04, 2023"),
            open: 4233.83,
            high: 4268.5,
            low: 4220.48,
            close: 4263.75,
            volume: 2329779403000,
        },
        {
            date: new Date("Thursday, October 05, 2023"),
            open: 4259.31,
            high: 4267.13,
            low: 4225.91,
            close: 4258.19,
            volume: 2230253462000,
        },
        {
            date: new Date("Friday, October 06, 2023"),
            open: 4234.79,
            high: 4324.1,
            low: 4219.55,
            close: 4308.5,
            volume: 2493423103000,
        },
        {
            date: new Date("Monday, October 09, 2023"),
            open: 4289.02,
            high: 4341.73,
            low: 4283.79,
            close: 4335.66,
            volume: 1991524626000,
        },
        {
            date: new Date("Tuesday, October 10, 2023"),
            open: 4339.75,
            high: 4385.46,
            low: 4339.64,
            close: 4358.24,
            volume: 2160880932000,
        },
        {
            date: new Date("Wednesday, October 11, 2023"),
            open: 4366.59,
            high: 4378.64,
            low: 4345.34,
            close: 4376.95,
            volume: 2115648071000,
        },
        {
            date: new Date("Thursday, October 12, 2023"),
            open: 4380.94,
            high: 4385.85,
            low: 4325.43,
            close: 4349.61,
            volume: 2344769422000,
        },
        {
            date: new Date("Friday, October 13, 2023"),
            open: 4360.49,
            high: 4377.1,
            low: 4311.97,
            close: 4327.78,
            volume: 2302663368000,
        },
        {
            date: new Date("Monday, October 16, 2023"),
            open: 4342.37,
            high: 4383.33,
            low: 4342.37,
            close: 4373.63,
            volume: 2124400350000,
        },
        {
            date: new Date("Tuesday, October 17, 2023"),
            open: 4345.23,
            high: 4393.57,
            low: 4337.54,
            close: 4373.2,
            volume: 2355659575000,
        },
        {
            date: new Date("Wednesday, October 18, 2023"),
            open: 4357.35,
            high: 4364.2,
            low: 4303.84,
            close: 4314.6,
            volume: 2390659124000,
        },
        {
            date: new Date("Thursday, October 19, 2023"),
            open: 4321.36,
            high: 4339.54,
            low: 4269.69,
            close: 4278.0,
            volume: 2635705086000,
        },
        {
            date: new Date("Friday, October 20, 2023"),
            open: 4273.85,
            high: 4276.56,
            low: 4223.03,
            close: 4224.16,
            volume: 2734219191000,
        },
        {
            date: new Date("Monday, October 23, 2023"),
            open: 4210.4,
            high: 4255.84,
            low: 4189.22,
            close: 4217.04,
            volume: 2454581997000,
        },
        {
            date: new Date("Tuesday, October 24, 2023"),
            open: 4235.79,
            high: 4259.38,
            low: 4219.43,
            close: 4247.68,
            volume: 2472963274000,
        },
        {
            date: new Date("Wednesday, October 25, 2023"),
            open: 4232.42,
            high: 4232.42,
            low: 4181.42,
            close: 4186.77,
            volume: 2665565303000,
        },
        {
            date: new Date("Thursday, October 26, 2023"),
            open: 4175.99,
            high: 4183.6,
            low: 4127.9,
            close: 4137.23,
            volume: 2959734415000,
        },
        {
            date: new Date("Friday, October 27, 2023"),
            open: 4152.93,
            high: 4156.7,
            low: 4103.78,
            close: 4117.37,
            volume: 2784710672000,
        },
        {
            date: new Date("Monday, October 30, 2023"),
            open: 4139.39,
            high: 4177.47,
            low: 4132.94,
            close: 4166.82,
            volume: 2600517109000,
        },
        {
            date: new Date("Tuesday, October 31, 2023"),
            open: 4171.33,
            high: 4195.55,
            low: 4153.12,
            close: 4193.8,
            volume: 2701786725000,
        },
        {
            date: new Date("Wednesday, November 01, 2023"),
            open: 4201.27,
            high: 4245.64,
            low: 4197.74,
            close: 4237.86,
            volume: 2804876425000,
        },
    ],
    title: {
        text: "S&P 500 Index",
    },
    subtitle: {
        text: "Daily High and Low Prices",
    },
    footnote: {
        text: "1 Aug 2023 - 1 Nov 2023",
    },
    series: [
        {
            type: "ohlc",
            xKey: "date",
            xName: "Date",
            lowKey: "low",
            highKey: "high",
            openKey: "open",
            closeKey: "close",
        },
    ],
})
const options7 = ref({
    data: [
        { asset: "Stocks", amount: 60000 },
        { asset: "Bonds", amount: 40000 },
        { asset: "Cash", amount: 7000 },
        { asset: "Real Estate", amount: 5000 },
        { asset: "Commodities", amount: 3000 },
    ],
    title: {
        text: "Portfolio Composition",
    },
    series: [
        {
            type: "donut",
            calloutLabelKey: "asset",
            angleKey: "amount",
            innerRadiusRatio: 0.9,
            innerLabels: [
                {
                    text: "Total Investment",
                    fontWeight: "bold",
                },
                {
                    text: "$100,000",
                    spacing: 4,
                    fontSize: 20,
                    color: "green",
                },
            ],
            innerCircle: {
                fill: "#c9fdc9",
            },
        },
    ],
})
const options8 = ref({
    data: [
        {
            department: "Sales",
            quality: 40,
            efficiency: 75,
        },
        {
            department: "Engineering",
            quality: 45,
            efficiency: 90,
        },
        {
            department: "HR",
            quality: 80,
            efficiency: 60,
        },
        {
            department: "Marketing",
            quality: 80,
            efficiency: 60,
        },
        {
            department: "Finance",
            quality: 85,
            efficiency: 50,
        },
    ],
    title: {
        text: "KPIs by Department",
    },
    series: [
        {
            type: "radar-area",
            angleKey: "department",
            radiusKey: "quality",
            radiusName: "Quality",
        },
        {
            type: "radar-area",
            angleKey: "department",
            radiusKey: "efficiency",
            radiusName: "Efficiency",
        },
    ],
})

</script>

<style scoped lang="less">
.AgCharts {
    display: flex;
    height: 100%;
    flex-wrap: wrap;

    .item {
        width: 25%;
        height: 45%;
    }
}
</style>